@import url(../less/base.less);
@import url(../less/normalize.less);
// 公共样式
@Rootsize:37.5rem;
body{
   
    background-color: #f8f8f8;
}
.mar{
    padding-left: (15 / @Rootsize);
    padding-right: (15 / @Rootsize);
}
// 头部搜索栏
.header_search{
    height: (46 / @Rootsize);
    width: (374 / @Rootsize);    
    display: flex;
    align-items: center;
    .porsition{
        width:(30 / @Rootsize) ;
        p{
          font-size: (13 / @Rootsize); 
          color: #000; 
        }
    }
    .search{
        
        flex: 1;
        display: flex;
        align-items: center;
        height: (32 / @Rootsize);
        background-color: #f7f7f7;
        border-radius:(16 / @Rootsize) ;  
        padding-left:(16 / @Rootsize) ; 
        span{
            font-size:(10 / @Rootsize) ;
        }
        input{
            background-color: #f7f7f7;
            border-radius:(16 / @Rootsize) ;
            transform: translate(0,(-5 / @Rootsize));
            &::placeholder{
                font-size:(12 / @Rootsize) ;
                padding-left:(12 / @Rootsize) ;
                
            }
        }     
    }
    .guidance{      
            width:(18 / @Rootsize);
            height: (18 / @Rootsize);
            img{
                width: 100%;
                transform: translate(0,(-5 / @Rootsize));
            }
        
    }
}


// 头部导航栏
.header_nav{
    .top{
        img{
            width: 100%;
        }
    }



    .mid{
       
        
        ul{
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top:(8 / @Rootsize) ;
            li{
                width: (6 / @Rootsize);
                height: (3 / @Rootsize);
                background-color: #fff;
                margin-right: (8 / @Rootsize);
                &:hover{
                    background-color: #303030;
                }
            }
        }
    }
    .bottom{
        height:(70 / @Rootsize) ;
        margin-top: (12 / @Rootsize);
        display: flex;
        justify-content: space-between;
        .son{
            width: (167 / @Rootsize);
            img{
                width: 100%;
            }
        }
    }
}


// 超值优惠部分
.preferential{
    .top{
        height: (18 / @Rootsize);
        display: flex;
        justify-content: space-between;
        margin-top: (36 / @Rootsize);
        p{
            font-size:(18 / @Rootsize) ;
        }
        .yjt{
            height:(18 / @Rootsize) ;
            img{
                height: 100%;
            }
        }
    }
    .content{
        margin-top: (20/ @Rootsize);
        display: flex;
        justify-content: space-between;
        .son{
            width: (167 / @Rootsize);
            .pic{
                width: 100%;
                img{
                    width: 100%;
                }
            }
            h3{
                font-size: (13 / @Rootsize);
                color: #101010;
                margin-top: (13 / @Rootsize);
            }
            h4{
                font-size:(11 / @Rootsize) ;
                color: #999999;
                margin-top: (8 / @Rootsize);
            }
            p{
                font-size:(11 / @Rootsize) ;
                color: #f39800;
                margin-top: (12 / @Rootsize);
            }
        }
    }
   
}


// 广告栏
.advertisement{
    height: (56 / @Rootsize);
    margin-top:(30 / @Rootsize) ;
    margin-bottom:(36 / @Rootsize) ;
    width: (345 / @Rootsize);
   img{
    width: 100%;
    
   }
}


// 为您推荐部分
.recommend{
   
   .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
        h3{
            font-size: (18 / @Rootsize);
            font-weight: normal;
        }
    }
    .right{  
        display: flex; 
            
                p{
                    font-size: (14 / @Rootsize);
                    position: relative;
                    &:hover ::after{
                        background-color: #16a4ef;
                    }
                    &::after{
                        content: "";
                        position: absolute;
                        width:(10 / @Rootsize) ;
                        height:(3 / @Rootsize) ;
                        
                        left: 50%;
                        bottom:(-3 / @Rootsize) ;
                        transform: translate(-50%,0);
                    }
                    
                }  
    }
   }
   .bottom{
    ul{
        margin-top:(24 / @Rootsize) ;
        li{
            display: flex;
            margin-bottom:(18 / @Rootsize) ;
            .pic{
                width: (110 / @Rootsize);
                height: (80 / @Rootsize);
                margin-right:(16 / @Rootsize) ;
                img{
                    width: 100%;
                }
            }
            h3{
                font-size:(13 / @Rootsize);
                color: #1f1f1f;
                margin-top: (8 / @Rootsize);
            }
            h4{
                font-size:(11 / @Rootsize);
                color: #999999;
                margin-top: (8 / @Rootsize);
            }
            .label{
                display: flex;
                
                .son{
                     font-size:(10 / @Rootsize) ;
                     padding: (3 / @Rootsize) (12 / @Rootsize);
                     border: 1px solid #cfcfcf;
                     border-radius: (3 / @Rootsize);
                     margin-right:(10 / @Rootsize) ;
                }
            }
            p{
                font-size:(13 / @Rootsize);
                color: #f39800;
                margin-top:(8 / @Rootsize) ;
                span{
                    font-size: (9 / @Rootsize);
                }
            }
        }
    }
   }
}


// 查看更多
.more{
    height:(38 / @Rootsize) ;
    width: (260 / @Rootsize);
    background-color: #f2f2f3;
    border-radius:(19 / @Rootsize) ;
    margin: 0 auto;
    line-height:(38 / @Rootsize) ;
    text-align: center;
    P{
        font-size:(12 / @Rootsize) ;
        
    }
}


// 品牌故事
.story{
    height:(85 / @Rootsize) ;
    border-radius: (4 / @Rootsize);
    background-color: red;
    margin-top:(24 / @Rootsize) ;
    img{
        width: 100%;

    }
}


// 底部导航栏
.foot_nav{
    height:(50 / @Rootsize);
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    ul{
        padding: 0 (40 / @Rootsize);
        display: flex;
        justify-content: space-between;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            .pic{
                width:(20 / @Rootsize) ;
                height:(20 / @Rootsize) ;
                margin-top: (8 / @Rootsize);
                img{
                    width: 100%;
                }
            }
            p{
                font-size: (11 / @Rootsize);
                margin-top:(12 / @Rootsize) ;
            }
        }
    }
}